<template>
  <view style="padding: 20rpx 0;">
    <waterfall
        ref="helangWaterfall"
        :hideList="hideList"
        imageKey="imgUrl"
        @statusChange="handleStatusChange"
    >
      <template v-slot:default="{ list, colWidth }">
        <waterfall-col
            v-for="(colItem,colIndex) in list"
            :key="colIndex"
            :colWidth="colWidth"
        >
          <template>
            <waterfall-item
                v-for="(item,index) in colItem"
                :key="item.__waterfall_renderId"
                :colIndex="colIndex"
                :reportHeightTime="item.__waterfall_reportHeightTime"
                @height="onRenderHeight"
            >
              <view class="content" @click="handleClick" :data-col_index="colIndex" :data-item_index="index">
                <image
                    class="image"
                    mode="aspectFill"
                    :src="item.imgUrl"
                    :style="{height:item.__waterfall_imageHeight}"
                >
                  <!-- 必须给图片的高度设置为 __waterfall_imageHeight 属性的高 -->
                </image>
                <view class="title">{{item.title}}</view>
                <view class="label ellipsis-1">{{item.label}}</view>
                <view class="money ellipsis-1">价格：{{item.money}}元</view>
                <view class="shop ellipsis-1">{{item.shop}}</view>
                <!-- 这个节点真实项目中可删除 -->
                <view
                    v-if="(colIndex === 0 && index === 0) || (colIndex === 1 && index === 1)"
                    style="margin-top: 8px;border: red solid 1px;padding: 8px;"
                >
                  <view style="font-size: 12px;color: red;margin-bottom: 4px;">
                    次节点为演示 update 函数动态更新数据的能力，
                    真是项目删除即可
                  </view>
                  <view>
                    <button
                        size="mini"
                        style="margin-right: 4px;"
                        :type="item.star ? 'primary':'warn'"
                        @tap.stop="handleStar({
												colIndex,
												itemIndex:index,
												data:item
											})"
                    >{{item.star ? '已':''}}收藏</button>
                  </view>
                  <view>
                    <view
                        v-if="item.activeHeight"
                        :style="{height:item.activeHeight+'px'}"
                        style="background-color: rgba(255, 0, 0, 0.4);font-size: 12px;"
                    >当前随机高度：{{ item.activeHeight }}</view>
                    <button size="mini"
                            @tap.stop="handleActiveHeight({
												colIndex,
												itemIndex:index,
												data:item
											})"
                    >随机高度</button>
                  </view>
                </view>
              </view>
            </waterfall-item>
          </template>
        </waterfall-col>
      </template>
      <template #tips>
        <view class="load-txt">
          <view v-if="hideList">
            <template v-if="waterfall.status === 'fail'">
              <image src="/uni_modules/helang-waterfall/static/waterfall/fail.png" mode="aspectFit"></image>
              <view>数据异常</view>
            </template>
            <template v-else-if="waterfall.status === 'empty'">
              <image src="/uni_modules/helang-waterfall/static/waterfall/empty.png" mode="aspectFit"></image>
              <view>暂无内容</view>
            </template>
          </view>
          <view v-else style="padding-top: 30rpx;">加载中</view>

        </view>
      </template>
    </waterfall>
    <!-- 演示多种效果 -->
    <view class="status-change" @click="onStatusChange">设置</view>
  </view>
</template>

<script>
// 瀑布流组件
import Waterfall from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list";
import WaterfallCol from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-col";
import WaterfallItem from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-item";

// 列表接口模拟数据，真是项目不需要
import mockData from '../../mock-data/waterfall-list.js'

export default {
  components: {
    "waterfall": Waterfall,
    "waterfall-col": WaterfallCol,
    "waterfall-item": WaterfallItem
  },
  computed:{
    hideList(){
      return ['fail','empty'].includes(this.waterfall.status);
    }
  },
  data() {
    return {
      // 异步请求相关
      ajax: {
        // 是否可以加载
        load: true,
        // 每页的请求条件
        rows:10,
        // 页码
        page:1,
        // 数据列表
        dataList:[]
      },
      // 瀑布流组件相关
      waterfall:{
        // 组件状态
        status:'',
        // 是否渲染完成
        renderEnd:true
      }
    }
  },
  onReady() {
    this.getList();
  },
  // 触底触发
  onReachBottom() {
    // 渲染完成，才允许请求下一页
    if(this.waterfall.renderEnd){
      this.getList();
    }
  },
  // 下拉刷新
  onPullDownRefresh(){
    // 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
    setTimeout(()=>{
      this.ajax.page = 1;
      this.ajax.load = true;
      this.getList(this.ajax.page);
    },800);
  },
  methods: {
    // 监听渲染高度，此事件为必用
    onRenderHeight(e){
      const { colIndex, height, reportHeightTimeChange } = e;
      // 上报当前高度，上报后会自动触发下一项数据的渲染
      this.$refs.helangWaterfall.reportHeight({
        colIndex,
        height,
        reportHeightTimeChange
      });
    },
    // 获取数据
    getList() {
      // 请求未完成前禁止发起请求
      if (!this.ajax.load) {
        return;
      }
      this.ajax.load = false;

      // 请求数据， mockData.getList 示例一个 ajax 请求
      mockData.getList({
        pageNum:this.ajax.page,
        pageSize:this.ajax.rows
      }).then(res=>{
        // 获取到的数据，请注意数据结构
        console.log(res);

        // 第一页数据执行以下代码
        if(this.ajax.page == 1){
          // 关闭下拉
          uni.stopPullDownRefresh();
        }

        // 数据无效时处理
        if(!res || res.length < 1){
          // 设置提示内容
          this.waterfall.status = this.ajax.page === 1 ? 'fail' : 'empty';
          return;
        }

        // 当前页面页面为1时，表示列表重绘，场景一般是 刷新/搜索 时
        const reset  = this.ajax.page === 1 ? true : false;
        // 若是重绘列表的话，需要取消 `hideList`属性，隐藏状态下会引发列表尺寸获取错误的问题
        if(reset){
          this.waterfall.status = '';
        }
        // 调用 render 方法，使组件开始进入渲染阶段
        this.$refs.helangWaterfall.render(res,reset);
        this.ajax.load = true;
        this.ajax.page++;
      })
    },
    // 导航状态切换演示监听
    onStatusChange(){
      const vlaues = ['','fail','empty'];
      const labels = ['正常展示', '加载异常', '无结果'];
      uni.showActionSheet({
        itemList: labels,
        success: (res)=> {
          this.waterfall.status = vlaues[res.tapIndex];
        }
      });
    },
    // 瀑布流组件点击事件
    handleClick(e){
      const { col_index, item_index } = e?.currentTarget?.dataset;
      uni.showToast({
        title:`第${col_index+1}栏的${item_index+1}个被点击`,
        icon:'none'
      });
    },
    // 处理瀑布流渲染状态
    handleStatusChange(status){
      if(status === 'RENDER_END'){
        this.waterfall.renderEnd = true;
      }else{
        this.waterfall.renderEnd = false;
      }
    },
    // 收藏
    handleStar(params){
      const { colIndex, itemIndex, data } = params;
      // 切换收藏状态
      const star = !data?.star;
      this.$refs.helangWaterfall.update({
        colIndex,
        itemIndex,
        data:{
          ...data,
          star
          // 此处因为收藏操作不会改变渲染高度，所以不需要传递reportHeight参数
        }
      })
    },
    // 收藏
    handleActiveHeight(params){
      const { colIndex, itemIndex, data } = params;
      const activeHeight = Math.floor(Math.random() * 100) + 50;
      this.$refs.helangWaterfall.update({
        colIndex,
        itemIndex,
        data:{
          ...data,
          activeHeight
        },
        // 因为改变高度后会于原来的高度产生差值，需要重新上报高度
        // update 方法的 reportHeight 参数设置为 true
        reportHeight:true
      });
    },

  }
}
</script>

<style lang="scss">
page {
  background-color: #f3f3f3;
}

.content{
  padding: 20rpx;
  background-color: white;
  border-radius: 4px;
  line-height: 1.3;

  .image{
    display: block;
    width: 100%;
    height: auto;
  }

  .ellipsis-1{
    white-space:nowrap;        // 强制一行显示
    overflow:hidden;          // 超出隐藏
    text-overflow:ellipsis;   // 省略号
  }

  .title{
    font-size: 28rpx;
    color:#666;
    margin: 20rpx 0;
  }

  .shop{
    font-size: 24rpx;
    color:#666;
    margin-top: 20rpx;
  }

  .label{
    padding: 10rpx 20rpx;
    border-radius: 100px;
    background-color: #F00;
    color: white;
    font-size: 24rpx;
    display: inline-block;
    line-height: 1;
  }

  .money{
    font-size: 28rpx;
    color:#F00;
    margin-top: 10rpx;
  }
}

.load-txt{
  padding:  0;
  text-align: center;
  color: #999;
  font-size: 24rpx;
}

.load-icon{
  width: 300rpx;
  height: 300rpx;
  margin: 0 auto 20rpx auto;
  display: block;
}

.status-change{
  position: fixed;
  left: 10rpx;
  top: 60%;
  width: 80rpx;
  height: 80rpx;
  z-index: 100;
  font-size: 24rpx;
  border-radius: 50%;
  background-color: #f00;
  color: #fff;
  line-height: 1;
  opacity: .7;
  box-shadow: 0 0 10px black;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
</style>